<template>
    <div class="chart-container" style="height: 100%; width: 100%">
        <div id="ZhuZhuang" :style="{ width: '100%', height: '100%' }" ref="chart" class="chart"></div>
    </div>
</template>

<script>
    import * as echarts from "echarts";
    import request from "@/utils/request.js";

    export default {
        name: "ZhuZhuang",
        mounted() {
            this.initChart();
        },
        data() {
            return {
                selectedOrganizationId: JSON.parse(localStorage.getItem("user")).organization,
                data: [],
                DTs: [],
                fireCounts: [],
                breakCounts: [],
            }
        },
        props: {
            data1: {
                type: Array, // 定义prop的类型为数组
                default: () => []
            }
        },
        watch: {
            data1() {
                this.initChart();
            },
        },
        methods: {
            initChart() {
                const myChart = echarts.init(document.getElementById("ZhuZhuang"));
                const option = {
                    legend: {
                        // 使用 formatter 函数自定义图例文本
                        formatter: function (name) {
                            if(name === '报警') {
                                return '报警';
                            } else {
                                return '故障';
                            }
                        },
                      textStyle: {
                          color: "var(--el-menu-text-color)"
                      }
                    },
                    xAxis: {
                        axisLabel:{
                            interval: 0,//X轴信息全部展示
                            rotate: 60,//60 标签倾斜的角度
                            color: '#eee'
                        },
                        data: this.data1.map(item => item.dt),
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                      axisLabel: {
                        interval: 0,
                        color: "#eee"
                      },
                    },
                    series: [
                        {
                            name: '报警',
                            type: 'bar',
                            data: this.data1.map(item => item.fireCount),
                        },
                        {
                            name: '故障',
                            type: 'bar',
                            data: this.data1.map(item => item.breakCount),
                        }
                    ],
                    tooltip: {
                        axisPointer: {
                            type: "line", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
                            snap: false, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
                        },
                        showContent: true, // 是否显示提示框浮层，默认显示
                        triggerOn: "mousemove", // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
                        confine: true, // 是否将 tooltip 框限制在图表的区域内
                        backgroundColor: "#ffffff", // 提示框浮层的背景颜色
                        padding: 15, // 提示框浮层内边距，单位px
                        position: "top",
                        textStyle: {
                            color: "#000000", // 文字的颜色
                            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
                            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
                        },

                    },
                };
                myChart.setOption(option);
            },
        }
    };
</script>

<style>
    .chart-container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .chart {
        width: 80%;
        height: 80%;
    }
</style>
